<template>
	<view>
		<view class="container">
			<view class="card">
				<view class="header">
					<view class="con-title"> {{$t('Page.user.ckje')}} </view>
					<view class="header-r">
						<text>{{$t('Page.mineWallet.czsxf')}}</text>
						<text> R$ {{rateMoney}}</text>
					</view>
				</view>
				<view class="rechargeInput">
					<text class="coin">R$</text>
					<input class="uni-input" type="number" @focus="isFocus = true" @blur="isFocus = false"
						v-model="withdrawAmount" />
				</view>
				<view class="progressBox">
					<view>
						{{ $t('Page.user.cosc') }}:
					</view>
					<view class="progress-wrap">
						<progress :percent="withdrawseting.progress" :show-info="true"></progress>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="header">
					<view class="con-title"> {{$t('Page.mineWallet.txxx')}} </view>
				</view>
				<view class="card-cont">
					<view class="row">
						{{$t('Page.mineWallet.phone')}}：{{bankInfo.phone}}
					</view>
					<view class="row">
						{{$t('Page.mineWallet.cpf')}}：{{bankInfo.cpf}}
					</view>
					<view class="row">
						{{$t('Page.mineWallet.bank')}}：{{bankInfo.name}}
					</view>
					<view class="row">
						{{$t('Page.mineWallet.email')}}：{{bankInfo.email}}
					</view>
					<view class="row">
						{{$t('Page.mineWallet.pix')}}：{{bankInfo.pix}}
					</view>
				</view>
			</view>
			<view class="card">
				<view class="header">
					<view class="con-title"> {{$t('Page.mineWallet.dqvip')}} </view>
					<view class="header-r">
						<text class="vip-level">{{$t('Page.mineWallet.VIP')}} {{levelInfo.grade}} </text>
					</view>
				</view>
				<view class="list">
					<view class="item">
						<view class="title">
							{{$t('Page.mineWallet.txje')}}
						</view>
						<view>
							R$ {{levelInfo.withdraw_total}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							{{$t('Page.mineWallet.txsj')}}
						</view>
						<view>
							{{levelInfo.withdraw_num}} / {{$t('Page.mineWallet.day')}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							{{$t('Page.mineWallet.txfl')}}
						</view>
						<view>
							{{levelInfo.withdraw_rate}} %
						</view>
					</view>
				</view>
			</view>
			<view class="btn confrim-btn" @click="openPopup">
				{{ $t('Page.mineWallet.txan') }}
			</view>
			<view class="card" v-if="withdrawseting.withdraw_remark" style="margin-bottom: 0;">
				<view class="remark">
					{{withdrawseting.withdraw_remark}}
				</view>
			</view>
		</view>
		<uni-popup ref="withdrawPopup" type="center" :is-mask-click="false">
			<view class="popup-cont">
				<view class="header">
					<view class="title">
						{{$t('Page.mineWallet.qrtx')}}
					</view>
					<image class="close-icon" src="/static/image/close.png" @click="closePopup"></image>
				</view>
				<view class="row">
					<view>
						{{$t('Page.mineWallet.total')}}
					</view>
					<view>
						R${{withdrawAmount}}
					</view>
				</view>
				<view class="row">
					<view>
						{{$t('Page.mineWallet.czsxf')}}
					</view>
					<view class="bouns">
						R${{rateMoney}}
					</view>
				</view>
				<view class="row">
					<view>
						{{$t('Page.mineWallet.sjh')}}
					</view>
					<view>
						{{bankInfo.phone}}
					</view>
				</view>
				<view class="row">
					<view>
						{{$t('Page.mineWallet.cpf')}}
					</view>
					<view>
						{{bankInfo.cpf}}
					</view>
				</view>
				<view class="row">
					<view>
						{{$t('Page.mineWallet.bank')}}
					</view>
					<view>
						{{bankInfo.name}}
					</view>
				</view>
				<view class="row">
					<view>
						{{$t('Page.mineWallet.email')}}
					</view>
					<view>
						{{bankInfo.email}}
					</view>
				</view>
				<view class="btn confrim-btn" @click="handeleWithdraw">
					{{$t('Page.mineWallet.confirm')}}
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		Debounce
	} from '@/utils/common.js'
	import {
		validarCPF
	} from '@/utils/function/reg.js'
	import {
		fomatFloat
	} from '@/utils/function/index.js'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				withdrawAmount: 0,
				feeAmount: 0,
				receiveAmount: 0,
				isFocus: false,
				userWallet: {},
				userInfo: {},
				withdrawseting: {},
				levelInfo: {},
				isBindBank: false,
				styles: {
					borderColor: '#2e363f',
					color: '#fff',
					backgroundColor: '#242A32'
				},
				bankInfo: {
					phone: '',
					cpf: '',
					name: '',
					email: '',
					pix: ''
				},
			}
		},
		computed: {
			...mapState({
				userMoney: state => state.app.userMoney
			}),
			...mapGetters('app', ['isPC']),
			isRangeWithdraw() {
				return parseFloat(this.withdrawAmount) < this.withdrawseting.minprice ||
					parseFloat(this.withdrawAmount) > this.withdrawseting.maxprice
			},
			remainWithdrawLimit() {
				return parseFloat(this.levelInfo.withdraw_total) -
					parseFloat(this.withdrawseting.withdraw_dealmoney)
			},
			remainWithdrawNum() {
				return this.levelInfo.withdraw_num - this.withdrawseting.withdraw_dealnum
			},
			realAmount() {
				const rate = Number(this.levelInfo.withdraw_rate)
				return this.withdrawAmount - fomatFloat((this.withdrawAmount * rate) / 100, 2)
			},
			rateMoney() {
				const rate = Number(this.levelInfo.withdraw_rate)
				return fomatFloat((this.withdrawAmount * rate) / 100, 2)
			}
		},
		created() {
			this.getWalletInfo()
		},

		methods: {
			// H5底部弹出 PC居中弹出
			openPopup() {
				if (!this.checkMoney()) return;
				const type = this.isPC ? 'center' : 'bottom'
				this.$refs.withdrawPopup.open(type)
			},

			closePopup() {
				this.$refs.withdrawPopup.close()
			},
			// 使用 Debounce 修饰符，实现防抖效果
			submit: Debounce(function() {
				const {
					ADDBANK
				} = this.$api
				sendMessage({
					flag: ADDBANK,
					content: this.bankInfo
				})
				uni.$once(ADDBANK, (res) => {
					const {
						code,
						data,
						msg
					} = res
					console.log("res: ", res);
					this.showToast(msg)
					if (code === 1) {
						this.getWalletInfo()
					}
				})
			}, 500),
			confirm(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					this.submit()
				}).catch(err => {
					console.log('err', err);
				})
			},

			getWalletInfo() {
				const {
					USERWALLET
				} = this.$api
				sendMessage({
					flag: USERWALLET
				})
				uni.$once(USERWALLET, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.userInfo = data.userinfo
						this.withdrawseting = data.userinfo.withdrawseting
						this.levelInfo = data.userinfo.level
						this.isBindBank = data.userinfo.bank instanceof Object
						if (this.isBindBank) {
							this.bankInfo = data.userinfo.bank
							delete this.bankInfo.status_text
						}
					} else {
						this.showToast(res.msg)
					}
				})
			},
			toPayResult(item) {
				uni.navigateTo({
					url: `/pages/Mine/wallet/components/withdrawResult?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},

			showToast(title) {
				uni.showToast({
					icon: 'none',
					title
				})
			},

			// 校验金额是否合法
			checkMoney() {
				const withdrawAmount = parseFloat(this.withdrawAmount)
				console.log("withdrawAmount: ", withdrawAmount);
				console.log("this.remainWithdrawNum: ", this.remainWithdrawNum);
				if (!withdrawAmount) { //未输入提现金额
					this.showToast(this.$t('Page.mineWallet.qsrje'))
					return false
				} else if (this.remainWithdrawNum <= 0) { //提现次数用完
					this.showToast(this.$t('Page.mineWallet.txcsbz'))
					return false
				} else if (this.remainWithdrawLimit < withdrawAmount) { //提现额度不足 
					this.showToast(this.$t('Page.mineWallet.txedbz'))
					return false
				} else if (this.remainWithdrawLimit <= 0) { //提现额度已用完
					this.showToast(this.$t('Page.mineWallet.txedyyw'))
					return false
				} else if (withdrawAmount > this.userInfo.money) { //提现金额大于账户总额 
					this.showToast(this.$t('Page.mineWallet.txjebz'))
					return false
				} else if (this.isRangeWithdraw) { //提现金额不在提现金额范围内
					this.showToast(
						`${this.$t('Page.mineWallet.txje1')}${this.withdrawseting.minprice} ${this.$t('Page.mineWallet.txje2')} ${this.withdrawseting.maxprice}`
					)
					return false
				} else {
					return true
				}
			},


			// 使用 Debounce 修饰符，实现防抖效果
			handeleWithdraw: Debounce(function() {
				console.log("this.checkMoney(): ", this.checkMoney());
				if (!this.checkMoney()) return;
				uni.showLoading({
					title: 'Loading...'
				})
				const {
					WITHDRAW
				} = this.$api
				sendMessage({
					flag: WITHDRAW,
					content: {
						price: this.withdrawAmount
					}
				})
				uni.$once(WITHDRAW, (res) => {
					uni.hideLoading()
					this.showToast(res.msg)
					if (res.code === 1) {
						this.closePopup()
						this.toPayResult(res.data)
					}
				})
			}, 500),
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		background: var(--bg-13);
		box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
		color: var(--color-28);
		border-radius: 100px;
		cursor: pointer;
	}

	.container {
		margin: 0 auto;
		box-sizing: border-box;

		.card {
			display: flex;
			flex-direction: column;
			background: var(--bg-9);
			border-radius: 15px;
			padding: 15px 15px 20px;
			margin-bottom: 10px;
			box-sizing: border-box;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.header-r {
					display: flex;
					align-items: center;
					color: #fff;

					text:last-child {
						margin-left: 6px;
						color: var(--color-32);
					}

					.vip-level {
						width: 40px;
						height: 16px;
						text-align: center;
						background: var(--bg-6);
						border-radius: 15px 15px 15px 15px;
						opacity: 1;
						font-size: 10px;
						font-family: Inter-Semi Bold Italic, Inter;
						font-weight: normal;
						color: #FFFFFF !important;
						line-height: 14px;
						font-style: italic;
						text-shadow: 0px 2px 2px #B63712;
						margin-right: 10px;
					}
				}
			}

			.con-title {
				font-size: 13px;
				font-weight: bold;
				color: #FFFFFF;
			}

			.rechargeInput {
				width: 100%;
				display: flex;
				align-items: center;
				height: 40px;
				margin-top: 10px;

				.coin {
					width: 40px;
					font-size: 25px;
					font-weight: bold;
					color: #FFFFFF;
				}

				.uni-input {
					font-weight: 700;
					padding: 0 15px;
					height: 40px;
					background: var(--bg-40);
					border-radius: 5px;
					color: #fff;
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					text-align: left
				}
			}

			.progressBox {
				margin-top: 15px;

				.progress-wrap {
					display: flex;
					align-items: center;
				}

				view:first-child {
					font-size: 13px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 15px;
					margin-bottom: 10px;
				}

				/deep/.uni-progress {
					border-radius: 100px;
					height: 10px;
				}

				/deep/.uni-progress-bar {
					border-radius: inherit;
					height: 1em !important;
					background: var(--bg-42) !important;
					border: 1px solid var(--border-color-3);
				}

				/deep/.uni-progress-inner-bar {
					border-radius: 25px;
					background: var(--bg-43);
				}

				/deep/.uni-progress-info {
					font-size: 14px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: var(--color-32);
				}
			}

			.card-cont {
				background: var(--bg-44);
				border-radius: 5px;
				padding: 15px;
				margin-top: 10px;
				color: #fff;
				font-size: 13px;
				font-weight: 500;
				line-height: 1.6;
				box-sizing: border-box;
			}

			.list {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 10px;

				.item {
					margin-right: 5px;
					width: calc((100% - 10px) / 3);
					min-height: 80px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					margin-right: 10px;
					background: var(--bg-36);
					border-radius: 5px;
					padding: 5px 8px;
					box-sizing: border-box;

					.title {
						text-align: center;
					}

					&:last-child {
						margin-right: 0;
					}

					view {
						font-size: 9px;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #FFFFFF;

						&:last-child {
							font-size: 12px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: var(--color-19);
						}
					}

				}
			}

			.remark {
				word-break: break-all;
				font-size: 13px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: var(--color-33);
				line-height: 15px;
			}
		}

		.noBind {
			width: 100%;
			display: flex;
			align-items: center;
			color: #4caf50;
			font-size: 14px;

			text {
				margin-left: 5px;
			}
		}

		.confrim-btn {
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 18px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			margin-bottom: 10px;
		}
	}

	.popup-cont {
		width: 100%;
		padding: 15px 15px 30px;
		border-radius: 15px 15px 0 0;
		background: var(--bg-38);
		opacity: 0.95;
		color: #fff;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15px;

			.title {
				font-size: 16px;
				font-weight: bold;
				color: var(--color-17);
			}

			.close-icon {
				width: 25px;
				height: 25px;
				cursor: pointer;
			}
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40px;

			view {
				font-size: 15px;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 18px;

				&:first-child {
					color: var(--color-34);
				}
			}

			.bouns {
				color: var(--color-1);
			}
		}

		.confrim-btn {
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 18px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			margin-top: 30px;
		}
	}


	.uni-forms {
		width: 500px;
		padding: 0 15px;

		/deep/.uni-forms-item__label {
			color: #adadc2;
			font-weight: 700;
			font-size: 14px;
		}

		/deep/.uni-easyinput__content {
			&:hover {
				border: 2px solid #000 !important;
			}
		}

		.submit-wrap {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 24px auto;
			color: #fff;

			.depositBtn {
				color: #fff;
				font-size: 14px;
				color: #fff;
				background: #33c38f;
				width: 100%;
				text-align: center;
				font-weight: 700;
				height: 52px;
				line-height: 52px;
				border-radius: .2rem;
				box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
			}
		}
	}

	@media screen and (min-width: 768px) {

		.container {

			.card {
				margin-bottom: 30px;

				.card-cont {
					border-radius: 10px;
				}
			}

			.noBind {
				width: 100%;
				display: flex;
				align-items: center;
				color: #4caf50;
				font-size: 14px;

				text {
					margin-left: 5px;
				}
			}

			.confrim-btn {
				max-width: 315px;
				height: 50px;
				line-height: 50px;
				margin-top: 30px;
				margin: 0 auto 30px;
			}
		}


		.popup-cont {
			min-width: 375px !important;
			border-radius: 15px;
			padding-bottom: 20px;
		}
	}
</style>